<template>
  <view class="container">
    <view class="content"> <input class="search" type="text" placeholder="请输入关键字搜索" /></view>
    <view class="nav">
      <view :class="{ 'select': selectType === '1' }" @tap="select('1')">本科专业</view>
      <view :class="{ 'select': selectType === '2' }" @tap="select('2')">专科专业</view>
    </view>
    <view class="major-list" v-for="item in majorList" :key="item.id">
      <view class="box-title">
        <text class="black">{{ item.name }}</text>
      </view>
      <view class="box-content-one" v-for="item2 in item.children" :key="item2.id">
        <view class="box-content-one-column" @tap="selectMajor(item2.id)">
          <view class="box-content-one-title">{{ item2.name }}</view>
          <view>{{ item2.children.length }}个专业<text
              :class="{ 'icon': true, rotate: selectMajorList.includes(item2.id) }">></text></view>
        </view>
        <view class="box-content-two" v-show="selectMajorList.includes(item2.id)">
          <view class="box-content-two-title" v-for="item3 in item2.children" :key="item3.id" @tap="toMajor(item3.id)">
            <view>{{ item3.name }}</view>
            <view>{{ item.num }}></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
import { majorList } from './data'
export default {
  data() {
    return {
      majorList,
      selectType: '1',
      selectMajorList: []
    };
  },
  methods: {
    select(type) {
      this.selectType = type;
    },
    selectMajor(id) {
      if (this.selectMajorList.includes(id)) {
        this.selectMajorList = this.selectMajorList.filter(item => item !== id)
      }
      else {
        this.selectMajorList.push(id)
      }
    },
    toMajor(id) {
      uni.navigateTo({
        url: './details?id=' + id
      });
    },
  }
};
</script>
  
<style lang="less" scoped>
@primary-color: #d01117;

.container {
  .content {
    background-color: white;
    padding: 30upx;
  }

  .search {
    width: calc(100% - 50upx);
    height: 80upx;
    border: 1px solid #ede9e9;
    border-radius: 15upx;
    margin-bottom: 30upx;
    padding: 0 25upx;
  }

  .nav {
    display: flex;
    padding: 0 75upx;
    justify-content: space-between;
    font-size: 28upx;
    height: 60upx;
    line-height: 60upx;
    background-color: white;

    .select {
      color: @primary-color;
      border-bottom: 1upx solid @primary-color;
    }
  }

  .major-list {
    padding: 0 30upx;
    background-color: white;
    margin-top: 15upx;

    .box-title {
      font-size: 30upx;
      padding: 25upx 0;
      font-weight: 700;

    }

    .box-content-one-column {
      display: flex;
      justify-content: space-between;
      border-bottom: 1upx solid #e6e6e6;
      padding: 10upx 0 25upx 0;
      font-size: 26upx;
      color: #333333;

      .rotate {
        display: inline-block;
        transform: rotate(90deg);
      }
    }

    .box-content-two-title {
      display: flex;
      justify-content: space-between;
      padding: 20upx 0;
      border-bottom: 1upx solid #e6e6e6;
      font-size: 24upx;
      color: #666666;
    }
  }
}
</style>